<template>
    <div>
      <!--top-->
      <HeaderTop title="我的" >
      </HeaderTop>

      <router-link :to="userInfo._id?'/userinfo':'/login'" class="routerClass">
        <div class="registerColor">
          <div class="register">
            <img src="./img/person.png" alt="">
            <div class="login">
              <span  v-if="!userInfo.phone">{{userInfo.name || '登录/注册'}}</span> <!--没有手机号的时候先判断是否用户名登录-->
              <span class="bandphone" >{{userInfo.phone||'暂无手机绑定'}}</span>
            </div>
            <div class="icon">
              >
            </div>
          </div>
        </div>
      </router-link>



      <div class="orderInfo">

          <div class="account">
            <div class="money">0.00 <span class="spanSize">元</span></div>
            <div><span>我的余额</span></div>
          </div>
          <div class="line"></div>
          <div class="account">
            <div>0.00 <span class="spanSize">元</span></div>
            <div><span>我的优惠</span></div>
          </div>
          <div class="line"></div>
          <div class="account">
            <div>0.00 <span class="spanSize">元</span></div>
            <div><span>我的积分</span></div>
          </div>
        </div>

      <div class="order">
        <div class="orderMy">
          <div class="orderMyLeft">
            <img src="./img/person.png" alt="">
            <span>我的订单</span>
          </div>
          <div class="orderMyRight">
            >
          </div>
        </div>

        <div class="rowline"></div>

        <div class="orderMy">
          <div class="orderMyLeft">
            <img src="./img/person.png" alt="">
            <span>我的订单</span>
          </div>
          <div class="orderMyRight">
            >
          </div>
        </div>

        <div class="rowline"></div>

        <div class="orderMy">
          <div class="orderMyLeft">
            <img src="./img/person.png" alt="">
            <span>我的订单</span>
          </div>
          <div class="orderMyRight">
            >
          </div>
        </div>
      </div>

      <div class="orderBottom">
        <div class="orderMy">
          <div class="orderMyLeft">
            <img src="./img/person.png" alt="">
            <span>服务中心</span>
          </div>
          <div class="orderMyRight">
            >
          </div>
        </div>
      </div>

        <div  v-if="userInfo._id">
          <mt-button type="danger" style="width:100%;margin-top: 5px" @click="logout">退出登录</mt-button>
        </div>
      <div v-else>333</div>

    </div>
</template>

<script>
  import {mapState} from 'vuex'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import { MessageBox,Toast } from 'mint-ui';
  export default {
    name: "profile",
    computed:{
      ...mapState(['userInfo'])
    },
    methods:{
      logout(){
        MessageBox.confirm('确认退出吗?').then(
          action=>{
           //请求退出
            this.$store.dispatch('logout')
            Toast('登出成功！')
          },
          action=>{
          console.log('点击了取消')
          }
        );
      }
    },
    components:{
      HeaderTop
    }
  }
</script>

<style scoped>
  .routerClass{text-decoration: none}
  .orderBottom .orderMy{
    display: flex;
    justify-content: space-between;
    height: 30px;
    background-color: white;

  }
  .orderBottom .orderMy .orderMyLeft{width: 30%;display: flex}
  .orderBottom .orderMy .orderMyLeft img{width: 20px;height: 20px;margin: auto 0;margin-left: 4px }
  .orderBottom .orderMy .orderMyLeft span{margin: auto}
  .orderBottom .orderMy .orderMyRight{text-align: right;margin:auto;width: 65%}

  .rowline{height: 1px;width: 100%;
    background-color: #f5f5f5;}
  .order{ background-color: #fff;margin: 10px 0}
  .order .orderMy{
    display: flex;
    justify-content: space-between;
    height: 30px;
  }
  .order .orderMy .orderMyLeft{width: 30%;display: flex}
  .order .orderMy .orderMyLeft img{width: 20px;height: 20px;margin: auto 0;margin-left: 4px }
  .order .orderMy .orderMyLeft span{margin: auto}
  .order .orderMy .orderMyRight{text-align: right;margin:auto;width: 65%}

  .orderInfo{display: flex;height: 42px;background-color: white}
  .orderInfo .account{width: 31%;}
  .orderInfo .account div{width: 100%}
  .line{height: 95%;margin: auto;background-color: #cfcfcf;width: 1px}

  .money{color: orange;font-size: 15px;font-weight: bold}
  .account span{font-size: 12px}
  .spanSize{font-size: 12px;color: #2c3e50;font-weight: normal}

  .registerColor{
    border-top: 1px solid #ceffee;
    background-color: #02a774;
  }
.register{
  display: flex;
  width: 95%;
  margin: 0 auto;
height: 63px;
  color: white;
}
.register img{width: 13%;height: 49px;margin: auto 0;border-radius: 50%}
.register .login{width: 30%;margin: auto 0}
.register .icon{width: 55%;text-align: right; line-height: 63px;}
  .bandphone{font-size: 12px}
</style>
